<template>
  <div class="header">
    <a href="#/">
      <img src="@/assets/logo.png" alt class="logo" />
      <span class="company">yyySystemsVIP</span>
    </a>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{usermanager}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" command="updatePaw">修改密码</el-dropdown-item>
        <el-dropdown-item icon="el-icon-bank-card" command="tcLogin">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import { logout } from "@/api/logout.js";
export default {
  data: function(){
    return{
        usermanager:localStorage.getItem("yyy-msm-token"),
    }
  },
  methods: {
    handleCommand(command) {
      //this.$message('click on item ' + command);
      //this.$message(`click on item ${command}`);//${command}es6获取参数的语法
      switch (command) {
        //修改密码
        case "updatePaw":
          this.$message("点击修改密码");
          break;
        //退出登录
        case "tcLogin":
          logout(localStorage.getItem("yyy-msm-token")).then(response => {
            const logoutinfo = response;
            if(logoutinfo.flag){
              //退出成功
              //清除用户信息
              localStorage.removeItem("yyy-msm-token");
              localStorage.removeItem("yyy-msm-user");
              //回到登陆页面
              this.$router.push('/login');
            }else{
              this.$message({
                message:'退出失败',
                type:'warning',
              });
            }
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style scoped>
.logo {
  width: 25px;
  vertical-align: middle;
  padding: 0px 15px 0px 40px; /*从上到下顺势正*/
}
.company {
  position: absolute;
  color: white;
  font-weight: 600;
}
/*下拉菜单 */
.el-dropdown {
  float: right;
  margin-right: 20px;
}
.el-dropdown-menu {
  margin-top: -10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-weight: 600;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>